<template>
  <div class="user-container">

    <div class="go-to-back" @click="handleBack">
        &lt;返回
    </div>

    <div class="user-wrapper" v-if="userInfo">
        <img :src="userInfo.img" class="avatar">
        <el-tooltip class="box-item" effect="dark" content="username" placement="top-start">
            <div class="username">{{ userInfo.username }}</div>
        </el-tooltip>
        <div class="phone">{{ userInfo.phone }}</div>
        <div class="information">{{ userInfo.openFileView }}访问 {{ userInfo.totalLike }}点赞 {{ userInfo.openFilePreview }}预览 {{ userInfo.openFileDownload }}下载</div>
    </div>

    <div class="content-wrapper">
      <div class="files" v-if="props.mode == 1 && currentFileList.length > 0">
        <div class="file" @click="goBack()" v-if="currentFileList.length > 1">
          <img src="@/assets/file/file.png" alt="" class="file-icon">
          <div class="file-name">...</div>
        </div>
        <div class="file" v-for="file in currentFileList[currentFileList.length - 1]" :key="file.id">
          <el-dropdown trigger="click">
            <img
              :src="fileType[Number(file.type)][Number(file.isOpen) || 0][Number(file.isShare) || 0]"
              alt=""
              class="file-icon"
            >
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="file.type == 2" @click="goToFile(file)">进入</el-dropdown-item>
                <el-dropdown-item v-if="file.type == 1" @click="preview(file)">预览</el-dropdown-item>
                <el-dropdown-item v-if="file.type == 1" @click="preview(file)">下载</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="file.folderName || file.fileName || file.name"
            placement="top-start"
          >
            <div class="file-name">
              {{ file.folderName || file.fileName || file.name }}
            </div>
          </el-tooltip>
        </div>
      </div>

      <div class="blogs" v-if="props.mode == 2">
        <CommunityList
            :postVos="postData"
            class="blog"
            v-if="postData.length > 0"
            @load-more="loadMore"
        ></CommunityList>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import CommunityList from '../community/CommunityList.vue';
import { onMounted, ref, watch } from 'vue'
import { searchUserPost } from '@/api/CommunityApi';
import img1 from '@/assets/file/1.png'
import img2 from '@/assets/file/2.png'
import img3 from '@/assets/file/3.png'
import privateImg from '@/assets/file/private.png'
import shareImg from '@/assets/file/share.png'
import fileImg from '@/assets/file/file.png'
import publicImg from '@/assets/file/public.png'
import { getFileTree, previewOpenFile, fileSharePreview } from '@/api/FileApi';
import router from '@/router';
import { selectUserById } from '@/api/UserApi';

const handleBack = () => {
  window.history.back()
}

const route = useRoute()
const userId = route.params.id

const userInfo = ref()
onMounted(async () => {
    userInfo.value = (await selectUserById(userId)).data.data
})

const props = defineProps({
    mode: {
        default: 1,
        type: Number
    }
})

const fileType = [
  [],
  [
    [img1, img2,img2],
    [img3, img3,img3],
    [img3, img3,img3]
  ],
  [
    [privateImg, shareImg,shareImg],
    [fileImg, publicImg,publicImg],
    [fileImg, publicImg,publicImg]
  ]
]

const postData = ref([])
const currentPage = ref(1)
const pageSize = 8
const hasMore = ref(true)

// 加载数据
const loadData = async (append = false) => {
  try {
    const res = await searchUserPost(userId, currentPage.value, pageSize)
    const newPosts = res?.data.data.postVos || []

    hasMore.value = newPosts.length === pageSize

    if (append) {
      postData.value.push(...newPosts)
    } else {
      postData.value = newPosts
    }
  } catch (error) {
    console.error('获取帖子失败', error)
  }
}

const loadMore = () => {
  if (hasMore.value) {
    currentPage.value++
    loadData(true)
  }
}

const fileTree = ref([])
const currentFileList = ref([])
watch(() => props.mode,async (newVal) => {
    if(newVal == 2){
        loadData(false)
    }else{
        fileTree.value = (await getFileTree(userId)).data.data
        currentFileList.value = []
        currentFileList.value.push(fileTree.value)
    }
},{
    immediate: true
})

const goBack = () => {
    currentFileList.value.pop()
}

const goToFile = (file) => {
    currentFileList.value.push(file.children)
}

const preview = async (file) => {
    let res;
    if(file.isOpen == 0) {
        res = await fileSharePreview(file.id)
    }else{
        res = await previewOpenFile(file.id,userId)
    }
    window.open(res.data.data,'_blank')
}
</script>

<style scoped>
.user-container {
    position: relative;
    width: 1838px;
    height: 932px;
    background-image: url('@/assets/file/background.png');
}

.user-container .user-wrapper {
  width: 403px;
  height: 579px;
  position: absolute;
  top: 200px;
  left: 1320px;
  background-image: url('@/assets/file/user.png');
}

.user-container .user-wrapper .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: absolute;
  top: 107px;
  left: 149px;
}

.user-container .user-wrapper .username {
  height: 30px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  top: 246px;
}

.user-container .user-wrapper .phone {
  height: 26px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  top: 314px;
}

.user-container .user-wrapper .information {
  height: 28px;
  font-family: SimSun;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #9f632c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  top: 421px;
}

.user-container .content-wrapper {
  width: 905px;
  height: 878px;
  position: absolute;
  top: 27px;
  left: 319px;
  background-image: url('@/assets/file/container.png');
}

.user-container .content-wrapper .files {
  width: 847px;
  height: 585px;
  position: absolute;
  left: 28px;
  top: 262px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  align-content: flex-start;
}

.user-container .content-wrapper .files .file {
  width: 206px;
  height: 195px;
  position: relative;
}

.user-container .content-wrapper .files .file .file-icon {
  height: 119px;
  width: 131px;
  position: absolute;
  left: 40px;
  top: 20px;
}

.user-container .content-wrapper .files .file .file-name {
  position: absolute;
  height: 22px;
  font-family: SimSun;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #8a5728;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  display: block;
}

.user-container .content-wrapper .blogs {
    width: 847px;
    height: 800px;
    position: absolute;
    left: 28px;
    top: 200px;
    /* 修改为 block 让子组件自行控制布局 */
    display: block;
    overflow-x: hidden;
}

/* 完全重写社区列表布局 */
::v-deep .community-list {
    /* 网格布局强制两列 */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    column-gap: 0px !important;
    row-gap: 20px !important;

    /* 尺寸控制 */
    width: 830px !important;
    max-width: 847px !important; /* 对齐父容器宽度 */
    padding: 20px !important;
    margin: 0 !important;
    
    /* 滚动条控制 */
    overflow-x: hidden !important;
}

/* 卡片宽度精确控制 */
::v-deep .post-item {
    width: 400px !important;
    max-width: 500px !important; /* (847 - 89)/2 = 379 */
    box-sizing: border-box;
}

::v-deep .content-container {
    width: 65%;
    padding-left: 70px;
}

::v-deep .post-title {
  font-size: 19px;
  margin: 10px 10px 0px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: SimSun;
  color:#746046;
}

.go-to-back {
  margin-left: 50px;
  margin-top: 50px;
  display: inline-block;
  cursor: pointer;
  font-family: SimSun, sans-serif;
  font-size: 20px;
  color: #fbe7bd;              /* 与标题颜色一致 */
  background-color: #b68951;   /* 与上方背景相同 */
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.go-to-back:hover {
  background-color: #d3a45a;   /* 变为较亮的色调 */
  color: #eed5a9;             /* 提升文字亮度 */
  border-color: #eed5a9;
}
</style>